<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    :root {
        --fireColor1: #ff5000;
        --fireColor2: rgba(255,80,0,0);
        --fireDuration: 1s;
        --blur: 0.4px;
        --fireSize: 90px;
        --smogColor1: rgb(49, 48, 48);
        --smogColor2: rgba(255,80,0,0);
        --smogDuration: 2s;
        --smogSize: 120px;
      }
      
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      
      html, body, #scene {
        width: 100%;
        height: 100%;
      }
      
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        background: rgb(0, 0, 0);
      }
      
      h1 {
        width: 100%;
        font-size: 50px;
        text-align: center;
        color: white;
        font-family: 'Italiana', serif;
        font-family: 'Julius Sans One'
      }
      
      #scene {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }
      
      #fire-container,
      #smog-container {
        font-size: 24px;
          filter: blur(var(--blur));
          -webkit-filter: blur(var(--blur));
          position: relative;
          width: 10em;
          height: 12em;
      }
      
      #fire-container .particle {
          animation: rise var(--fireDuration) ease-in infinite;
          background-image: radial-gradient(var(--fireColor1) 30%,var(--fireColor2) 70%);
          border-radius: 50%;
          mix-blend-mode: screen;
          opacity: 0;
          position: absolute;
          bottom: 0;
          width: var(--fireSize);
          height: var(--fireSize);
      }
      
      #smog-container .particle {
          animation: rise var(--smogDuration) ease-in infinite;
          background-image: radial-gradient(var(--smogColor1) 30%,var(--smogColor2) 70%);
          border-radius: 50%;
          mix-blend-mode: screen;
          opacity: 0;
          position: absolute;
          bottom: 0;
          width: var(--smogSize);
          height: var(--smogSize);
      }
      
      #buttons {
        display: flex;
        position: relative;
        justify-content: center;
        
      }
      
      button {
        margin: 10px;
        width: 200px;
        height: 50px;
        border-radius: 30px;
        position: absolute;
        bottom: 0px;
        font-weight: 900;
        border: none;
        font-size: 30px;
        cursor: pointer;
        font-family: system-ui;
        -webkit-box-shadow: 0px 15px 24px -9px rgba(255,255,255,0.2); 
        box-shadow: 0px 15px 24px -9px rgba(255,255,255,0.2);
      }
      
      #yeah,
      #nah {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      
      #confirm {
        background-color: #fd6408;
        color: #313131;
        transition: all 0.8s;
      }
      
      #confirm:hover {
        background-color: rgba(255,255,255,0);
        box-shadow: none; 
        color: #fd6408;
      }
      
      #nah {
        position: relative;
        width: 300px;
        min-height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      
      #cancel {
        background-color: #e9e9e9;
        color: #313131;
        transition: all 0.8s;
      }
      
      #cancel:hover {
        background-color: rgba(255,255,255,0);
        box-shadow: none; 
        color: #ffffff;
      }
      
      @keyframes rise {
          from {
              opacity: 0;
              transform: translateY(0) scale(1);
          }
          25% {
              opacity: 1;
          }
          to {
              opacity: 0;
              transform: translateY(-10em) scale(0);
          }
      }
      
      @keyframes fly-away {
        0% {
          opacity: 1;
          filter: blur(1px);
        }
      
        100% {
          transform: scale(0.3);
          opacity: 0;
          filter: blur(20px);
          border-radius: 50%;
        }
      }
      
      
      img {
        position: fixed;
        min-width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.2;
      }
      </style>
</head>
<body>
    <img src="https://assets.codepen.io/t-1/shapelined-Z1xxfm52Htc-unsplash.jpg" alt="scary-forest">
  <div id="scene">
    <h1>Summon the Ghosts?</p>

    <div id="buttons-container">
      <div id="buttons">
        <div id="yeah">
          <div id="fire-container"></div>
          <button id="confirm" type="button">Confirm</button>
        </div>

        <div id="nah">
          <div id="smog-container"></div>

          <button id="cancel" type="button">Too Late...</button>
        </div>
      </div>
    </div>
  </div>
</body>
<script>
    let fireContainer = document.getElementById("fire-container");
let smogContainer = document.getElementById("smog-container");
function createParticles(fireContainer, num, leftSpacing) {
  for (let i = 0; i < num; i += 1) {
    let particle = document.createElement("div");
    particle.style.left = `calc((100% - 5em) * ${i / leftSpacing })`;
    particle.setAttribute("class", "particle");
    particle.style.animationDelay = 4 * Math.random() + "s";
    fireContainer.appendChild(particle);
  }
}

createParticles(fireContainer, 60, 60);
createParticles(smogContainer, 30, 30);
</script>
</html>